@bundle-stats/utils

What is @bundle-stats/utils?

@bundle-stats/utils is a utility library for analyzing and comparing webpack bundle stats. It provides various functions to parse, normalize, and compare bundle stats, making it easier to understand the performance and size of your webpack bundles.

What are @bundle-stats/utils's main functionalities?

Parsing Webpack Stats

This feature allows you to parse raw webpack stats into a more manageable format. The `parseStats` function takes the raw stats JSON and converts it into a structured object.

const { parseStats } = require('@bundle-stats/utils');
const stats = require('./path/to/webpack-stats.json');
const parsedStats = parseStats(stats);
console.log(parsedStats);

Normalizing Webpack Stats

This feature normalizes the webpack stats, making it easier to compare different builds. The `normalizeStats` function takes the raw stats JSON and returns a normalized version.

const { normalizeStats } = require('@bundle-stats/utils');
const stats = require('./path/to/webpack-stats.json');
const normalizedStats = normalizeStats(stats);
console.log(normalizedStats);

Comparing Webpack Stats

This feature allows you to compare two sets of webpack stats. The `compareStats` function takes the current and baseline stats JSON and returns a comparison object highlighting the differences.

const { compareStats } = require('@bundle-stats/utils');
const currentStats = require('./path/to/current-stats.json');
const baselineStats = require('./path/to/baseline-stats.json');
const comparison = compareStats(currentStats, baselineStats);
console.log(comparison);

Other packages similar to @bundle-stats/utils

webpack-bundle-analyzer

webpack-bundle-analyzer is a tool that visualizes the size of webpack output files with an interactive zoomable treemap. It provides a graphical representation of your bundle, making it easier to identify large modules and optimize your bundle size. Unlike @bundle-stats/utils, which focuses on parsing and comparing stats, webpack-bundle-analyzer provides a visual analysis.

source-map-explorer

source-map-explorer analyzes JavaScript bundles using source maps to determine which file each byte in your minified code came from. It helps you understand the composition of your bundle and identify large dependencies. While @bundle-stats/utils focuses on stats comparison, source-map-explorer provides a detailed breakdown of the bundle content.

bundlesize

bundlesize is a tool that lets you set a limit on the size of your JavaScript bundles and fails your build if the bundle size exceeds the specified limit. It is useful for enforcing size constraints on your bundles. Unlike @bundle-stats/utils, which provides detailed stats analysis, bundlesize focuses on enforcing size limits.

README

@bundle-stats/utils

Common utilities for bundle-stats packages.

How to generate a weback report

import { createJobs, createReport } from '@bundle-stats/utils';
import * as webpack from '@bundle-stats/utils/lib/webpack';

// Get webpack stats data
const WEBPACK_STATS_CURRENT = {/* ... */};
const WEBPACK_STATS_BASELINE = {/* ... */};

// Create jobs
const jobs = createJobs([
  { webpack: WEBPACK_STATS_CURRENT },
  { webpack: WEBPACK_STATS_BASELINE }
]);

// Create report
const report = createReport(jobs);

console.log(report.insights.webpack.assetsSizeTotal.data.text);
>> Bundle size increased to 9.77KB (+100%).

Packages

• CLI
• Webpack
• Gatsby
• Next

Related projects

:cyclone: relative-ci.com

Specialized insights for web bundles:

• Monitor and analyze bundle size, assets, modules, packages
• GitHub Check, GitHub Pull Request, and Slack integrations
• Support for all major CI services (CircleCI, GitHub Actions, Travis CI CI, Jenkins, Gitlab CI, Codeship)
• Free for Developers & OpenSource

Try Beta

:first_quarter_moon: relative-ci/compare

Standalone web application to compare Webpack/Lighthouse/Browsertime stats.

Compare bundle stats

:zap: bundle-stats-action

Github Action that generates bundle-stats reports for webpack.